<template>
    <div class="container index">
        <div class="content">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-row>
                        <el-col :span="24" class="wrapper">
                            <data-card
                                    idName="user_created_count"
                                    :endVal="count.createUser"
                                    info-text="今日新增用户"
                                    iconType="el-icon-mars-personadd"
                                    color="#2d8cf0"
                            ></data-card>
                        </el-col>
                    </el-row>
                </el-col>

                <el-col :span="6">
                    <el-row>
                        <el-col :span="24" class="wrapper">
                            <data-card
                                    idName="visit_count"
                                    :endVal="count.visit"
                                    info-text="今日浏览量"
                                    iconType="el-icon-mars-activity"
                                    color="#64d572"
                            ></data-card>
                        </el-col>
                    </el-row>
                </el-col>

                <el-col :span="6">
                    <el-row>
                        <el-col :span="24" class="wrapper">
                            <data-card
                                    idName="collection_count"
                                    :endVal="count.collection"
                                    info-text="今日数据采集量"
                                    iconType="el-icon-mars-coupons"
                                    color="#ffd572"
                            ></data-card>
                        </el-col>
                    </el-row>
                </el-col>

                <el-col :span="6">
                    <el-row>
                        <el-col :span="24" class="wrapper">
                            <data-card
                                    idName="transfer_count"
                                    :endVal="count.transfer"
                                    info-text="今日服务调用量"
                                    iconType="el-icon-mars-shenfenzheng"
                                    color="#f25e43"
                            ></data-card>
                        </el-col>
                    </el-row>
                </el-col>

            </el-row>
        </div>
    </div>
</template>

<script>

    import DataCard from "./components/DataCard";
    export default {
        name: "index",
        components: {DataCard},
        data() {
            return {
                count: {
                    createUser: 496,
                    visit: 3264,
                    collection: 24389305,
                    transfer: 39503498
                },
            }
        },
    }
</script>

<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>
    .wrapper{
        font-size: 14px;
        position: relative;
        transition: all .2s ease-in-out;
        &:hover {
            box-shadow: 1px 3px 10px rgba(0, 0, 0, .2);
            border-color: #eee;
        }
    }
</style>